<template>
	<div class="editBox clearfix" ref='editmain'>
		<WangToolbar class='editor_box_toolber' :editor="editor" :defaultConfig="toolbarConfig" />
		<WangMain class='editor_box_textarea' :style='getStyle' v-model="valueHtml" :defaultConfig="editorConfig" @onChange="handleChange" @onCreated="onCreated" />
		<div v-show="false">
			<input ref='uploadbtn3D' class="uploadbtnVideo" type="file" accept=".glb" style="display: none" @change="custom3DUploadChange($event)" />
		</div>
	</div>
</template>

<script>
	import '@wangeditor/editor/dist/css/style.css' // 引入 css
	import { Editor as WangMain, Toolbar as WangToolbar } from '@wangeditor/editor-for-vue'
	import { h, VNode } from 'snabbdom'
	import { Boot, DomEditor } from '@wangeditor/editor'
	import { putProgress } from "@/utils/oss.js";
	export default {
		components: {
			WangMain,
			WangToolbar
		},
		props: {
			content: {
				type: String,
				required: false,
				default: ''
			},
			height: Number,
			type: String,
		},
		computed: {
			getStyle() {
				return {
					height: this.height ? this.height + "px !important" : "400px !important"
				}

			},
		},
		data() {
			var customImgUpload = (file, insertFn) => {
				this.customImgUpload(file, insertFn)
			}
			var customVidUpload = (file, insertFn) => {
				this.customVidUpload(file, insertFn)
			}
			return {
				glbpath: window.config.VUE_GLB_BASE_PATH,
				editor: null,
				valueHtml: '',
				toolbarConfig: {
					excludeKeys: ['group-image', 'group-video', 'fullScreen', 'emotion', 'codeBlock', 'divider', 'blockquote'],
					insertKeys: {
						index: 20, // 插入的位置，基于当前的 toolbarKeys
						keys: ["uploadImage", "uploadVideo", 'upload3d']
					}
				},
				editorConfig: {
					autoFocus: false,
					placeholder: '请输入内容...',
					MENU_CONF: {
						uploadImage: {
							customUpload: customImgUpload
						},
						uploadVideo: {
							customUpload: customVidUpload
						},
					},
				},
				mode: 'default', // or 'simple'

			}
		},
		created() {
			this.valueHtml = this.content
		},
		mounted() {

		},
		methods: {
			customImgUpload(file, insertFn) {
				// JS 语法
				if(file.type != 'image/png' && file.type != 'image/jpg' && file.type != 'image/jpeg' && file.type != 'image/gif') {
					this.$message({
						type: 'error',
						message: '请上传jpg或png格式的图片！'
					})
					return
				}
				const key = `szhjxpt/editor/images/${file.name}`;
				putProgress(key, file).then(res => {
					let url = ''
					if(res && res.data && res.data.code == 200) {
						url = this.baseurl + res.data.data
					} else {
						url = this.baseurl + key;
					}
					insertFn(url, '', url)
				});
			},
			customVidUpload(file, insertFn) {
				// JS 语法
				if(file.type != 'video/mp4') {
					this.$message({
						type: 'error',
						message: '请上传mp4格式的视频！'
					})
					return
				}
				const key = `szhjxpt/editor/videos/${file.name}`;
				putProgress(key, file).then(res => {
					let url = ''
					if(res && res.data && res.data.code == 200) {
						url = this.baseurl + res.data.data
					} else {
						url = this.baseurl + key;
					}
					insertFn(url, '')
				});
			},
			custom3DUpload() {
				this.$refs.uploadbtn3D.click()
			},
			custom3DUploadChange(event) {
				if(event.target.files && event.target.files.length) {
					const file = event.target.files[0];
					var type = file.name.substring(file.name.lastIndexOf('.'))
					if(type != '.glb') {
						this.$message({
							type: 'error',
							message: '请上传glb格式的文件！'
						})
						return
					}
					const key = `szhjxpt/editor/images/${file.name}`;
					putProgress(key, file).then(res => {
						let url = ''
						if(res && res.data && res.data.code == 200) {
							url = this.baseurl + res.data.data
						} else {
							url = this.baseurl + key;
						}
						url = this.glbpath + url
						const resume = { // JS 语法
							type: 'video',
							width: "500",
							height: '300',
							src: "<iframe src=" + url + "></iframe>",
							children: [{
								text: ''
							}] // void 元素必须有一个 children ，其中只有一个空字符串，重要！！！
						}
						this.editor.focus()
						this.editor.insertNode(resume);
						this.$refs.uploadbtn3D.value = '';
					});
				}

			},
			onCreated(editor) {
				this.editor = Object.seal(editor) // 一定要用 Object.seal() ，否则会报错
				this.editor.on('upload3d', () => {
					this.custom3DUpload()
				})
				this.editor.on('upload3dNode', url => {
					const resume = { // JS 语法
						type: 'video',
						width: "500",
						height: '300',
						src: "<iframe src=" + url + "></iframe>",
						children: [{
							text: ''
						}] // void 元素必须有一个 children ，其中只有一个空字符串，重要！！！
					}
					this.editor.focus()
					this.editor.insertNode(resume);
				})

			},
			handleChange(editor) {
				var data = {
					text: editor.getText(),
					html: editor.getHtml(),
				}
				this.$emit('change', data)
			},
		},
		beforeDestroy() {
			const editor = this.editor
			if(editor == null) return
			editor.destroy() // 组件销毁时，及时销毁编辑器
		}
	}
</script>

<style scoped>
	.editBox {
		width: 100%;
		height: auto;
		box-sizing: border-box;
		border: 1px solid #CCCCCC;
		border-radius: 5px;
	}
	
	.editor_box_toolber {
		border-bottom: 1px solid #CCCCCC;
	}
</style>